import { PageHeaderWrapper } from '@ant-design/pro-components';
import { Badge, Button, Card, Col, Form, message, Popconfirm, Row, Table, Tag } from 'antd';
import React, { Component } from 'react';
import axios from 'axios';
import FormFilter from '@/components/ManageFormFilter/FormFilter';
import { DeleteOutlined, PlusCircleOutlined } from '@ant-design/icons';
import Alarm from '@/components/alarmManage/alarmModel';
import { connect } from 'umi';

class AlarmManager extends Component {
  state = {
    dataSource: [],
  };
  componentDidMount() {
    // 当页面组件完全的加载完毕触发此生命周期，只会触发一次
    this.formRef = React.createRef();
    this.modalRef = React.createRef();
    this.tableRef = React.createRef();
    //初始数据加载
    this.handleRefreshData();
  }
  //请求设备器table表数据
  handleRefreshData() {
    let formData = {};
    try {
      const getFormData = this.formRef.current.getFieldsValue();
      formData = { ...getFormData };
    } catch (e) {
      formData = undefined;
    }

    // 获取表格数据
    const { dispatch } = this.props;

    dispatch({
      type: 'alarmManage/changeLoadingStatus',
    });
    if (dispatch) {
      dispatch({
        type: 'alarmManage/getData',
        payload: formData ? { formData } : {},
      });
    }
  }

  //重置查询表单
  resetAllFields() {
    const { current } = this.formRef;
    current.resetFields();
  }

  //新增/修改Model
  changeModel(type = 'add', data = {}) {
    const { dispatch } = this.props;
    dispatch &&
      dispatch({
        type: 'alarmManage/changeModalVisibleAndSetValue',
        payload:
          type === 'update'
            ? {
              type,
              data,
            }
            : {
              type,
            },
      });
  }

  changePage(currentPage) {
    const { dispatch } = this.props;
    dispatch &&
      dispatch({
        type: 'detectorManage/changePage',
        payload: currentPage,
      }).then(() => {
        this.handleRefreshData();
      });
  }

  submitalarmInfo(type = 'add', values) {
    const { dispatch } = this.props;
    dispatch &&
      dispatch({
        type: 'alarmManage/submitMonitorInfo',
        payload: {
          type,
          formData: {
            ...values,
            // address: values.address.join('/'),
          },
        },
        callback: (res) => {
          if (res.code == 200) {
            message.success(`${type === 'add' ? '添加' : '修改'}成功`);
            this.handleCancel();
            this.handleRefreshData(); // 刷新列表
          } else {
            message.error(res.message);
          }
        },
      });
  }

  //关闭modal窗
  handleCancel() {
    const { dispatch } = this.props;
    dispatch &&
      dispatch({
        type: 'alarmManage/changeModelVisibleAndCloseModel',
      });
  }

  deletealarmById(record) {
    const { dispatch } = this.props;
    dispatch &&
      dispatch({
        type: 'alarmManage/deletealarmInfo',
        payload: record,
        callback: (res) => {
          if (res.code == 200) {
            message.success(`删除成功`);
            this.handleRefreshData(); // 刷新列表
          } else {
            message.error(res.message);
          }
        },
      });
  }

  UpdatealarmInfo(record) {
    const { dispatch } = this.props;
    dispatch &&
      dispatch({
        type: 'alarmManage/updatealarmInfo',
        payload: record,
        callback: (res) => {
          if (res.code == 200) {
            message.success(`修改成功`);
            this.handleRefreshData(); // 刷新列表
          } else {
            message.error(res.message);
          }
        },
      });
  }

  render() {
    const formName = '预警信息条件搜索';
    const tableName = '预警信息列表';
    const {
      alarmData,
      alarmDetail,
      loading,
      dispatch,
      visible,
      optiontype,
      dataDetail,
      effectPageInfo,
      pagination,
    } = this.props;
    const columns = [
      {
        title: '序号',
        dataIndex: 'id',
        showFilter: false,
        align: 'center',
        // render: (value, record, index) => {
        //   return `${(effectPageInfo.current - 1) * pagination.size + index + 1}`;
        // },
      },
      {
        title: '预警断面名称',
        dataIndex: 'cname',
        showFilter: true,
        align: 'center',
      },
      {
        title: '预警设备名称',
        dataIndex: 'devicename',
        showFilter: true,
        align: 'center',
      },
      {
        title: '所在位置',
        dataIndex: 'address',
        showFilter: false,
        align: 'center',
      },
      {
        title: '预警经度',
        dataIndex: 'latitude',
        showFilter: false,
        align: 'center',
      },
      {
        title: '预警维度',
        dataIndex: 'longitude',
        showFilter: false,
        align: 'center',
      },
      {
        title: '报警级别',
        dataIndex: 'level',
        showFilter: true,
        align: 'center',
        render: (value) => {
          // return <Badge status={'error'} text={<b style={{ color: 'red' }}>{value}</b>} />;
          switch (value) {
            case 'I':
              return <Badge status={'error'} text={<b style={{ color: 'red' }}>{value}</b>} />;
            case 'II':
              return <Badge status={'error'} text={<b style={{ color: 'red' }}>{value}</b>} />;
            case 'III':
              return <Badge status={'error'} text={<b style={{ color: 'red' }}>{value}</b>} />;
            case 'IV':
              return <Badge status={'error'} text={<b style={{ color: 'red' }}>{value}</b>} />;
            case 'V':
              return <Badge status={'error'} text={<b style={{ color: 'red' }}>{value}</b>} />;
          }
        },
      },
      {
        title: '报警日期',
        dataIndex: 'alarmtime',
        // key: 'address',
      },
    ];

    return (
      <PageHeaderWrapper>
        <Row>
          <Col span={24}>
            <Card title={formName} bordered={false} style={{ marginBottom: 20 }}>
              <Row>
                <Form
                  layout="inline"
                  ref={this.formRef}
                  onFinish={(values) => {
                    this.handleRefreshData();
                  }}
                  style={{ marginBottom: 20 }}
                >
                  <FormFilter columns={columns} />
                  <Button type="primary" htmlType="submit" style={{ marginRight: 20 }}>
                    查询
                  </Button>
                  <Button
                    type="primary"
                    htmlType="button"
                    style={{ marginRight: 20 }}
                    onClick={() => {
                      this.resetAllFields();
                    }}
                  >
                    重置
                  </Button>
                  <Button
                    type="primary"
                    htmlType="button"
                    style={{ marginRight: 20 }}
                    onClick={() => {
                      this.changeModel();
                    }}
                    danger
                  >
                    <PlusCircleOutlined />
                    手动添加污染物量
                  </Button>
                </Form>
              </Row>
            </Card>
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            <Card bordered={false}>
              <Table
                rowKey={'id'}
                columns={columns}
                dataSource={alarmData}
                scroll={{ x: 'max-content' }}
                size={'small'}
                rowSelection={[]}
              />
            </Card>
          </Col>
        </Row>
        <Alarm
          visible={visible}
          optiontype={optiontype}
          alarmDetail={alarmDetail}
          ref={this.modalRef}
          handleSumbit={(type, values) => {
            this.submitalarmInfo(type, values);
          }}
          centered
        />
      </PageHeaderWrapper>
    );
  }
}

export default connect(({ alarmManage }) => ({
  alarmData: alarmManage.alarmData,
  loading: alarmManage.loading,
  pagination: alarmManage.pagination,
  selectedRowsKeys: alarmManage.selectedRowsKeys,
  visible: alarmManage.visible,
  optiontype: alarmManage.optiontype,
  effectPageInfo: alarmManage.effectPageInfo,
  alarmDetail: alarmManage.alarmDetail,
}))(AlarmManager);
